<template>
	<view class="main">
		<view class="title">
			<view class="title-name">
				<span class="return-his" @click="upOneLevel()">返回</span> <span
					style="font-size: 1.2rem;font-weight: bolder;">营销卡办理</span>
			</view>
		</view>
		<view class="voucher-main">
			<hqy-tab-vue v-model="tabSelect" :arrayData="tabList" @change="handleChange"></hqy-tab-vue>
			<view class="voucher-data">
			<be-received-vue v-if="tabSelect==1"> </be-received-vue>
			<record-vue v-else-if="tabSelect==2"></record-vue>
			<package-vue v-else></package-vue>
			</view>
		</view>
	</view>
</template>

<script>
	import hqyTabVue from '../../components/tables/index.vue'
	import recordVue from './compoents/record.vue';
	import packageVue from './compoents/package.vue';
	import beReceivedVue from './compoents/beReceived.vue';
	export default {
		components: {
			hqyTabVue,
			recordVue,
			packageVue,
			beReceivedVue

		},
		data() {
			return {
				tabList: [{
					name: '待激活',
					value: 1
				}, {
					name: '已激活',
					value: 2
				}
				// , {
				// 	name: '我的用户',
				// 	value: 3
				// },
				],
				tabSelect: 1
			}
		},
		methods: {
			upOneLevel() {
				uni.navigateBack({
					delta: 1 // 返回层数，1表示上一页面
				});
			},
			handleChange(val) {
				console.log('父组件中的数字值发生变化:', this.tabSelect);
				// 在这里可以执行其他操作
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100vw;
		height: 100vh;
		// background-color: #f50;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.title {
		width: 100%;
		height: 6rem;
		background-color: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.title-name {
			margin-top: 2rem;
			width: 60%;
			height: 60rpx;
			// background-color: #f50;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.return-his {
				margin-left: 20rpx;
				font-size: 1rem;
			}
		}
	}

	.voucher-main {
		flex: 1;

		display: flex;
		flex-direction: column;
	}

	.voucher-data {
		width: 100%;
		flex: 1;
		background-color: #dfdfdf;
	}
</style>